import {Component} from "react"
import "./My.less"
//我的
const gieUrls = [
    {
        imgUrl:"https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/09fa513d269759eed846184ab3fb43166d22df19.jpg",
        titleUrl:'消费券'
    },
    {
        imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F63%2F06%2F01300000348000123541068188112.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        titleUrl:'收藏'
    },
    {
        imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.zol.com.cn%2Fpic%2Fyouxi%2Fori_46%2F469389.jpg&refer=http%3A%2F%2Fimg9.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        titleUrl:'约看'
    },
    {
        imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-article.pchome.net%2Fgame%2F00%2F19%2F25%2F53%2F1csoil2zn.jpg&refer=http%3A%2F%2Fimg-article.pchome.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        titleUrl:'订单'
    },
    {
        imgUrl:"https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/09fa513d269759eed846184ab3fb43166d22df19.jpg",
        titleUrl:'私人助理'
    },
    {
        imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F63%2F06%2F01300000348000123541068188112.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        titleUrl:'微聊'
    },
    {
        imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.zol.com.cn%2Fpic%2Fyouxi%2Fori_46%2F469389.jpg&refer=http%3A%2F%2Fimg9.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        titleUrl:'评价'
    },
    {
        imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-article.pchome.net%2Fgame%2F00%2F19%2F25%2F53%2F1csoil2zn.jpg&refer=http%3A%2F%2Fimg-article.pchome.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        titleUrl:'投诉建议'
    },
]
const getImgs = [
    {
        imgUrl:"https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/09fa513d269759eed846184ab3fb43166d22df19.jpg",
        titleUrl:'我的合同'
    },
    {
        imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F63%2F06%2F01300000348000123541068188112.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        titleUrl:'转租'
    },
    {
        imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.zol.com.cn%2Fpic%2Fyouxi%2Fori_46%2F469389.jpg&refer=http%3A%2F%2Fimg9.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        titleUrl:'退租'
    },
    {
        imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-article.pchome.net%2Fgame%2F00%2F19%2F25%2F53%2F1csoil2zn.jpg&refer=http%3A%2F%2Fimg-article.pchome.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        titleUrl:'芝麻信用'
    },
    {
        imgUrl:"https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/09fa513d269759eed846184ab3fb43166d22df19.jpg",
        titleUrl:'续租'
    },
    {
        imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F63%2F06%2F01300000348000123541068188112.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        titleUrl:'账单'
    },
]

export default class Home extends Component{

    getDate=()=>{
        return(
            <>
            {
              gieUrls.map(item=>{
                  return(
                    // <Grid.Item key={item.titleUrl}>
                    //      <div className="urlImg"><img src={item.imgUrl} alt="" /></div>
                    //         <p>{item.titleUrl}</p>
                    // </Grid.Item>
                      <li key={item.titleUrl}>
                        <div className="urlImg"><img src={item.imgUrl} alt="" /></div>
                        <p>{item.titleUrl}</p>
                      </li>
                  )
              })  
            }
            </>
        )
    }
    setData=()=>{
        return(
            <>
            {
                getImgs.map(item1=>{
                    return(
                        <li key={item1.titleUrl}>
                            <div className="urlImg"><img src={item1.imgUrl} alt="" /></div>
                            <p>{item1.titleUrl}</p>
                        </li>
                    )
                })
            }
            </>
        )
    }
render(){
    return(
        <div>
            <div className="changeIndex1">
          <ul className="input">
            <li>
              <i className="iconfont icon-xiazai19"></i>
            </li>
            <li>
              <div className="formIndex2">
                <div className="image">
                  <img
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.zol.com.cn%2Fpic%2Fyouxi%2Fori_46%2F469389.jpg&refer=http%3A%2F%2Fimg9.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg"
                    alt=""
                  />
                </div>
              </div>
            </li>
            <li>
              <i className="iconfont icon-shezhi"></i>
            </li>
          </ul>
        </div>
            <div className="conents">
                <div className="topContent">
                {/* <Grid columns={3} gap={8}>
                {this.getDate()}
                </Grid> */}
                    <ul>
                   {this.getDate()}
                    </ul>
                </div>
                <div className="mains">
                    <p>宜居管家<span>宜居专享服务</span></p>
                </div>
                <div className="ButtomContent">
                    <ul>
                        {this.setData()}
                    </ul>
                </div>
            </div>
            
        </div>
    )
}

}